/* modules/inform/pages/inform-page/inform-page.wxss */
.container {
  background: linear-gradient(180deg,
      rgb(255, 243, 233) 0%,
      rgb(254, 215, 215) 100%);
  min-height: 100vh;

  margin: 0 15rpx;


  .box {
    display: block;
    height: 470rpx;
  }

  .inform_logo {
    width: 750rpx;
    height: 500rpx;
    margin: -80rpx 0 -110rpx -20rpx;
  }

  .informBox {
    position: relative;

    .informBox1,
    .informBox2 {
      background-color: #FEFEFE;
      height: 400rpx;
      width: 88vw;
      border-radius: 16rpx;
      box-shadow: 2rpx 8rpx 16rpx rgba(253, 162, 167, 0.26);

      .informContent {
        display: flex;
        flex-direction: column;
        padding: 35rpx;

        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            display: flex;
            align-items: center;

          }

          .unread {
            width: 36rpx;
            height: 36rpx;
            background-color: #FF5858;
            border-radius: 100%;

          }
        }

        .content {
          width: 80vw;
          font-size: 36rpx;
          color: #919191;
          padding: 50rpx 0 42rpx 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .group,
        .time {
          font-size: 26rpx;
          color: #636363;
        }

        .group {
          position: absolute;
          bottom: 68rpx;
          left: 35rpx;
        }

        .time {
          position: absolute;
          bottom: 32rpx;
          left: 35rpx;
        }

        .groupName {
          color: #2643A0;
        }

        .goto {
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          bottom: 32rpx;
          right: 35rpx;
        }
      }
    }

    .informBox1 {
      position: absolute;
      top: 0rpx;
      left: 18rpx;
    }

    .informBox2 {
      position: absolute;
      top: 30rpx;
      left: 48rpx;
    }
  }


}